import React from "react";
import DatePicker from "../../../DatePicker";
import type { FieldBaseType } from "../../type";
import { isUndefined } from "@ct0/functions";

export default function DateField({
  field,
  isValid,
  onChange,
}: {
  field: FieldBaseType<number>;
  isValid: boolean;
  onChange: (v: number | null) => void;
}) {
  const { value, defaultValue, disabled, placeholder } = field;

  const v = isUndefined(value) ? defaultValue : value;

  return (
    <DatePicker
      value={v}
      placeholder={placeholder}
      picker="datetime"
      style={isValid ? undefined : { border: "1px solid #c55252" }}
      onChange={onChange}
      disabled={disabled}
      getPopupContainer={() => document.body}
    />
  );
}
